<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/airport_cars.css" />
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script src="${ctxStatic }/mui/js/mui.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1"></script>
	<style>
		input,label{
			font-size: 14px;
		}
		.mui-scroll-wrapper,.mui-scroll{
			background: #fff;
		}
		.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content{
			bottom:0;
		}
		.mui-input-row .mui-input-clear ~ .mui-icon-clear{
			right: 20px;
		}
		.mui-table-view{
		  margin-top: 0;
		}
		.mui-indexed-list{
			height: 100% !important;
		}
	</style>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="shuttle_airport" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">接送机</h1>
			</div>
			<div class="mui-page-content">
				 <div class="mui-scroll-wrapper">
				 	  <div class="mui-scroll">
				 	  	 <div class="shuttle_airports_wrap">
                            
				 	  	 	    <div class="shuttle_tit">
				 	  	 	    	<div class="mui-row">
				 	  	 	    		<div class="mui-col-xs-6 meet_give">
				 	  	 	    			<span class="meet_airport mg_a_gn">接机</span>
				 	  	 	    		</div>
				 	  	 	    		<div class="mui-col-xs-6 meet_give">
				 	  	 	    			<span class="give_airport">送机</span>
				 	  	 	    		</div>
				 	  	 	    	</div>
				 	  	 	    </div>
<form id="airportForm" class="mui-input-group" method="post" action="${ctxWx}/air/airlist">
<input type="hidden" name="mapkm" value="" id="mapkm"/>
<input type="hidden" name="maptime" value="" id="maptime"/>
<input type="hidden" name="mes" value="" id="mes"/>
<input id="airportRentType" type="hidden" name="tabType" value="接机" />
<input type="hidden" name="pageNo" value="1" />
<input type="hidden" name="pageSize" value="100" />
<input type="hidden" name="rentType" value="6" />	
				 	  	 	         <div class="mui-input-row">
				 	  	 	         	 <span class="airport_ico">
				 	  	 	         	 	<img src="${ctxStatic }/wx/img/day_img/jichang_jsj@2x.png" />
				 	  	 	         	 </span>
				 	  	 	             <label class="setout_air">出发机场</label>
				 	  	 	             <input type="hidden" id="cityRecord"/>
						                 <input type="hidden" id="spottypes"/>
				 	  	 	             <input class="departCode" name="departcity.siteid" id="departid" type="hidden" ${empty tRentproduct.departcity.siteid?'data-autocity="yes"':'' } value="${tRentproduct.departcity.siteid }">
		                                 <input class="departName opt-city-choose citys" data-type="9" name="departcity.sitename" type="text" id="depart" value="" placeholder="请选择出发机场" readonly/>
				 	  	 	             <i class="mui-icon mui-icon-arrowright ico_right_air"></i>
				 	  	 	         </div>
				 	  	 	         <div class="mui-input-row">
				 	  	 	         	  <span class="airport_ico">
				 	  	 	         	  	<img src="${ctxStatic }/wx/img/day_img/didian_jsj@2x.png" />
				 	  	 	         	  </span>
				 	  	 	             <label class="arrive_date">抵达地点</label>
				 	  	 	             <a class="art_d_link" href="#wap_lists">
				 	  	 	             <input type="text" id="airport_s_date" class="mui-input-clear" placeholder="请选择抵达地点" name="aboardAddress">
				 	  	 	             <input type="hidden" id="destcity" class="mui-input-clear" placeholder="请选择抵达地点" name="destcity.sitename">
				 	  	 	             </a>
				 	  	 	             <i class="mui-icon mui-icon-arrowright ico_right_air"></i>
				 	  	 	         </div>
				 	  	 	         <div class="mui-input-row" style="border-bottom: none;">
				 	  	 	         	<span class="airport_ico">
				 	  	 	         	  	<img src="${ctxStatic }/wx/img/day_img/shijian_jsj@2x.png" />
				 	  	 	         	  </span>
				 	  	 	             <label>出发时间</label>
				 	  	 	             <input type="text" id="airport_time" readonly="readonly" class="mui-input" placeholder="请选择出发时间" name="fromdateStr" value="${defaultTime}">
				 	  	 	             <i class="mui-icon mui-icon-arrowright ico_right_air"></i>
				 	  	 	         </div>
				 	  	 	         <div class="s_airport_btn">
				 	  	 	         	     <button type="button" id="subBtn">下一步</button>
				 	  	 	         </div> 
                             </form>
				 	  	 </div>
				 	  </div>
				 </div>
			</div>
		</div>
		<!--单页面结束-->
	<div id="wap_lists" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left ychback" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">订单填写</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="ych_city_box">
							<div class="mui-row ych_back_ico mui-input-row">
								<i class="mui-icon mui-icon-search wap_d_date_ico"></i>
								<input type="text" id="suggestId" class="mui-input-clear" size="20"  style="width:100%;" placeholder="请输入上车地点" />
							</div>
						</div>
						<div id="searchResultPanel" style="border:none;width:100%;height:auto; display:none;z-index: 22;"></div>
						<div id="l-map"></div>
					</div>
				</div>
			</div>
		</div>
		<!--选择城市机场-->
				<div id="city" class="mui-page">
		<div class="city-bar mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			<h1 class="mui-center mui-title" style="color: #fff;">选择站点</h1>
		</div>
		<div class="mui-page-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
			<div id="list" class="mui-indexed-list listBox" >
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
			</div>
			</div>
			</div>
		</div>
	</div>
	<div id="allmap"></div>
	</body>
	<script type="text/javascript">
			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}

			var map = new BMap.Map("l-map");
			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});
			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if(e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
				value = "";
				if(e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});
			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
					// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			if(data.status == 0 && data.result.length>0 ){
				var $sitename = data.result[0].address_components.city;
				$("#destcity").val($sitename);
			}
		});
			});
		</script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
    <script type="text/javascript" src="${ctxStatic }/mui/js/mui.picker.min.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.dtpicker.js" ></script>
	<script type="text/javascript" src="${ctxStatic }/mui/js/mui.indexedlist.js" ></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.poppicker.js" ></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#shuttle_airport'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
				view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);
    //选择城市机场
    	var cityHtml = '';
		$(function(){
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});	
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				$('#spottypes').val($(this).attr('data-type'));
				viewApi.go('#city');
			});
		});
		// 获取站点数据
		function getSiteData(){
			var spottypes = $('#spottypes').val();
			var loaded = false; // 已加载
			var html = '';		
			if(spottypes == '9' && cityHtml != '') {
				loaded = true;
				html = cityHtml;
			}
			if(!loaded){			
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							html += site.sitename;
							html += '</li>';
						}
					}
					if(spottypes == '9') {
						cityHtml = html;
					}
					$('#indexListContent').html(html);
					// 初始化站点数据
					$('#cityStyle').remove();
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(html);
				// 初始化站点数据
				$('#cityStyle').remove();
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			} else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#shuttle_airport');
		}
		Zepto(function(){
			//传值
			$('.ychback').on('tap', function(){
				 var oInput1= $('#suggestId').val();
				 $('#airport_s_date').attr('value', oInput1);
			})
			//点击切换
			$('.meet_give').on('tap',function(){
				$(this).children().addClass('mg_a_gn').parent().siblings().children().removeClass('mg_a_gn');
			})
			$('.meet_airport').on('tap',function(){
				$('.setout_air').text('出发机场');
				$('.departName').attr('placeholder','请选择出发机场');
				$('#airport_s_date').attr('placeholder','请选择抵达地点');
				$('.arrive_date').text('抵达地点');
				$('#airportRentType').val('接机');
			})
			$('.give_airport').on('tap',function(){
				$('.setout_air').text('送达机场');
				$('.departName').attr('placeholder','请选择送达机场');
				$('#airport_s_date').attr('placeholder','请选择出发地点');
				$('.arrive_date').text('出发地点');
				$('#airportRentType').val('送机');
			})
			//选择时间
	      var start_time_picker = new mui.DtPicker({});
				$('#airport_time').on('tap',function(){
					setTimeout(function(){
			start_time_picker.show(function(items){
				$("#airport_time").val(items.text);
			});
		},200);
		})
		})
	</script>
</html>
<script type="application/javascript">
		Zepto(function(){
			//提交表单
			$('#subBtn').on('tap', function(){
				var msg= '';
				var x = $('input[name="departcity.sitename"]').val();//出发地
				var y = $('#airport_s_date').val();//目的地
				var z = $("#airport_time").val();
				var map = new BMap.Map("allmap");
				var km = 0;
				var time = 0;
				if(x == ''){
					msg = '请填写出发地';
				} else if(y == ''){
					msg = '请填写目的地';
				}else if(z == ''){
					msg = '请选择时间';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else {
					var output = "从"+x+"到"+y+"驾车预计需要";
					var searchComplete = function (results){
					if (transit.getStatus() != BMAP_STATUS_SUCCESS){
						return ;
					}
					var plan = results.getPlan(0);
					output += plan.getDuration(true) + "\n";                //获取时间
					time = plan.getDuration(true);
					$('#maptime').val(time)
					output += "总路程大约为：" ;
					output += plan.getDistance(true) + "\n";             //获取距离
					km = plan.getDistance(true);
					$('#mapkm').val(km);
				}
					var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
						onSearchComplete: searchComplete,
						onPolylinesSet: function(){        
							$("#mes").val(output);
					}});
					transit.search(x, y);
					window.setTimeout(submitform, 1200); 
					function submitform() {
						var time = $("#airport_time").val();
						mui.post('${ctxWx}/pu/checkTime',{time:time},function(d){
						if(d==1){
							mui.alert(msg, '距离发车时间不足2小时，请重新选择发车时间');
							return;
						}else if(d==2){
							mui.alert(msg, '暂只支持三个月之内产品预定');
							return;
						}else{
							$('#airportForm').submit();
						}
					});
					} 
				}
			})
		})
	</script>